<template>
    <div class="dict-table drag-table">
        <div class="dict-table-head">
            <div class="dict-table-title">
                {{ name }} - {{ code }}
            </div>
            <div class="dict-table-tools">
                <mt-button
                    class="btn"
                    height="32px"
                    width="80px"
                    :disabled="btnDisabled"
                    @click="addBtn">
                    新增
                </mt-button>
            </div>
        </div>

        <div class="dict-table-list mt-list-table">
            <el-table ref="table" :data="list" class="table" border :stripe="isStripe">
                <el-table-column show-overflow-tooltip prop="dictLabel" label="值名称" min-width="120"></el-table-column>
                <el-table-column show-overflow-tooltip prop="dictValue" label="值编码" min-width="120"></el-table-column>
                <el-table-column prop="status" label="状态" width="150">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            :active-value="1"
                            :inactive-value="0"
                            activeText="启用"
                            inactiveText="禁用"
                            @change="handleChange($event, scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="dictSort" label="显示顺序" min-width="80"></el-table-column>
                <!-- <el-table-column show-overflow-tooltip prop="updateBy" label="最后编辑人" min-width="120"></el-table-column>
                <el-table-column show-overflow-tooltip prop="updateTime" label="最后编辑时间" min-width="150"></el-table-column> -->
                <el-table-column prop="" label="操作" width="140">
                    <template slot-scope="scope">
                        <mt-button type="table" @click="editDict(scope.row)">修改</mt-button>
                        <mt-button type="table" @click="deleteDictBtn(scope.row)">删除</mt-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="mt-list-footer">
            <div class="totaldata">共{{ total }}条</div>
            <div class="page">
                <el-pagination
                    :current-page="page"
                    :page-size="pageSize"
                    :page-sizes="pageSizes"
                    :total="total"
                    background
                    layout="sizes, prev, pager, next"
                    class="mt-page"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <el-dialog
            :title="titleName"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <el-form
                ref="form"
                :model="editForm"
                label-width="80px"
                :rules="formRules">
                <div class="dialog-body">
                    <el-form-item label="字典名称">
                        <mt-input v-model="name" disabled></mt-input>
                    </el-form-item>
                    <el-form-item label="值名称" prop="dictLabel">
                        <mt-input v-model="editForm.dictLabel"></mt-input>
                    </el-form-item>
                    <el-form-item label="值编码" prop="dictValue">
                        <mt-input v-model="editForm.dictValue"></mt-input>
                    </el-form-item>
                    <el-form-item label="显示顺序" prop="dictSort">
                        <mt-input-number v-model="editForm.dictSort" :min="0"></mt-input-number>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <mt-button type="submain" @click="handleClose">取消</mt-button>
                <mt-button @click="saveCheck">确定</mt-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { listMixin } from "@/mixins/list-mixins";
import { resetObject } from "@/utils";
export default {
    name: "DictTable",

    props: {
        name: { type: String, default: "" },
        code: { type: String, default: "" }
    },

    data () {
        return {
            statusList: [
                { value: 1, label: "启用" },
                { value: 0, label: "禁用" }
            ],

            dialogType: "add",
            editForm: {
                dictDataId: "",
                dictValue: "", // 值编码
                dictLabel: "", // 值名称
                dictSort: "", // 顺序
                status: "" // 状态
            },
            dialogVisible: false,
            formRules: {
                dictLabel: [{ required: true, trigger: blur, message: "请输入字典值名称" }],
                dictValue: [{ required: true, trigger: blur, message: "请输入字典值编码" }]
            }
        };
    },

    mixins: [ listMixin ],

    computed: {
        btnDisabled () {
            return !this.code;
        },
        titleName () {
            return this.dialogType === "add" ? "新增字典值" : "修改字典值";
        },
        btnName() {
            return this.dialogType === "add" ? "新增" : "修改";
        }
    },

    watch: {
        code () {
            this.form = {
                value: "",
                status: ""
            };
            this.page = 1;
            this.readList(); // 切换条目后重置分页
        }
    },

    created () {},

    mounted () {},

    methods: {
        /* 获取字典值列表 */
        async readList () {
            const params = {
                dictTypeId: this.code,
                page: this.page,
                pageSize: this.pageSize
            };
            this.$request.post(this.API.GET_DICT_LIST, params).then(res => {
                if (res.success) {
                    // console.log("获取字典值列表:", res);
                    this.list = res.data.data;
                    this.total = res.data.total;
                }
            });
        },

        /* 新增按钮 */
        addBtn () {
            this.editForm.dictSort = this.total;
            this.dialogType = "add";
            this.dialogVisible = true;
        },

        /* 修改按钮 */
        editDict (row) {
            this.editForm = {
                dictDataId: row.dictDataId,
                dictValue: row.dictValue,
                dictLabel: row.dictLabel,
                dictSort: row.dictSort
            };
            this.dialogType = "edit";
            this.dialogVisible = true;
        },

        /* 保存编辑 */
        saveCheck () {
            this.$refs["form"].validate((valid) => {
                if (valid) this.save();
            });
        },
        async save () {
            const params = {
                dictLabel: this.editForm.dictLabel,
                dictValue: this.editForm.dictValue,
                dictTypeId: this.code,
                dictSort: this.editForm.dictSort
            };
            if (this.dialogType === "add") {
                this.$request.post(this.API.ADD_DICT_VALUE, params).then((res) => {
                    if (res.success) {
                        this.$mtMessage.success("新增成功!");
                        this.DICT.setDictByApi(this.code);
                        this.readList();
                        this.handleClose();
                    }
                });
            }
            else if (this.dialogType === "edit") {
                params.dictDataId = this.editForm.dictDataId;
                this.$request.post(this.API.UPDATE_DICT_VALUE, params).then((res) => {
                    if (res.success) {
                        this.$mtMessage.success("修改成功!");
                        this.DICT.setDictByApi(this.code);
                        this.readList();
                        this.handleClose();
                    }
                });
            }
        },

        /* 弹窗关闭 */
        handleClose () {
            resetObject(this.editForm);
            this.dialogVisible = false;
        },

        /* 删除字典值 */
        deleteDictBtn (row) {
            this.$confirm("是否删除该字典值？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.deleteDict(row);
            }).catch(() => {});
        },
        async deleteDict (row) {
            await this.$request.post(this.API.DELETE_DICT_VALUE, {
                dictDataId: row.dictDataId
            }).then(res => {
                if (res.success) {
                    this.$mtMessage({ message: "删除成功", type: "success" });
                    this.DICT.setDictByApi(this.code);
                    this.readList();
                }
            });
        },

        /* 状态改变 */
        async handleChange (value, row) {
            const params = {
                dictDataId: row.dictDataId,
                status: value
            };
            await this.$request.post(this.API.UPDATE_DICT_STATUS, params).then(res => {
                if (res.success) {
                    this.DICT.setDictByApi(this.code);
                    this.$mtMessage({ message: "修改成功", type: "success" });
                }
                this.readList();
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.dict-table {
    flex-basis: 80%;
    width: 0;
    padding: 0 0 0 3rem;
    margin-bottom: 1rem;
    min-height: calc(100vh - 25.5rem);
    &-title {
        font-size: 16px;
        font-weight: 700;
        color: rgba(25, 28, 34, 0.8);
        height: 3rem;
        line-height: 3rem;
    }
    &-head {
        display: flex;
        justify-content: space-between;
        .dict-table-tools {
            display: flex;
            &-select { margin-right: 1.6rem; }
            .btn { margin-left: 1.6rem; }
        }
    }
    &-list {
        width: 100%;
        min-height: calc(100% - 8rem);
        margin-top: 20px;
    }
    .mt-list-footer {
        margin-top: 2rem;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: flex-end;
        .totaldata {
            font-size: 1.4rem;
        }
    }
    .operation {
        font-size: 20px;
        margin-right: 16px;
        vertical-align: middle;
    }
}
</style>
<style lang="scss">
.dict-table {
    &-list {
        .el-switch {
            &__label {
                width: auto !important;
            }
            &__core {
                margin: 0 10px;
            }
        }
    }
}
</style>